---
{
	"title": "Prettify",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Affiche de la syntaxe des extraits de code source.",
	"tag": "prettify",
	"parentdir": "prettify",
	"altLangPrefix": "prettify",
	"dateModified": "2014-02-19"
}
---

<p>Mise en surbrillance de syntaxe des extraits de code source dans une page html en utilisant <a href="https://github.com/google/code-prettify" rel="external">google-code-prettify</a>.</p>

<section>
	<h2>Comment utiliser</h2>
	<ol>
		<li>Appliquer <code>class="wb-prettify"</code> à un élément sur la page pour charger le composant (une fois par page).</li>
		<li>Appliquer <code>class="prettyprint"</code> à un élément <code>pre</code> ou <code>code</code> pour appliquer la mise en surbrillance de syntaxe. Comme alternative utiliser <code>class="wb-prettify all-pre"</code> pour appliquer la mise en surbrillance de syntaxe à tous les éléments <code>pre</code> sur la page.</li>
		<li>Appliquer <code>class="linenums"</code> à un élément <code>pre</code> ou <code>code</code> pour ajouter les nombres de ligne. Comme alternative utiliser <code>class="wb-prettify linenums"</code> à tous les éléments <code>pre</code> applicables. Spécifier le nombre commençant en ajoutant <code>linenums:#</code> avant <code>linenums</code>.</li>
		<li>Ajouter le soutien supplémentaire de langage de programmation avec <code>class="wb-prettify lang-*"</code> (p. ex., <code>class="wb-prettify lang-css"</code>) et en ajoutant <code>class="lang-*"</code> à chaque élément <code>pre</code> ou <code>code</code> applicable. Les formats supportés sont ci-dessous:
			<ul>
				<li>lang-apollo</li>
				<li>lang-clj</li>
				<li>lang-css</li>
				<li>lang-dart</li>
				<li>lang-go</li>
				<li>lang-hs</li>
				<li>lang-lisp</li>
				<li>lang-lua</li>
				<li>lang-ml</li>
				<li>lang-n</li>
				<li>lang-proto</li>
				<li>lang-scala</li>
				<li>lang-sql</li>
				<li>lang-tex</li>
				<li>lang-vb</li>
				<li>lang-vhdl</li>
				<li>lang-wiki</li>
				<li>lang-xq</li>
				<li>lang-yaml</li>
			</ul>
		</li>
	</ol>
</section>

<section>
	<h2 id="examples" class="wb-prettify all-pre lang-css">Exemples</h2>
	<section>
		<h3>HTML</h3>
		<pre><code>&lt;form action="#" method="post"&gt;
	&lt;div&gt;
		&lt;label for="data1"&gt;Formulaire - Entrée - apparence par défaut&#160;:&lt;/label&gt;
		&lt;input name="data1" type="text" id="data1" /&gt;
	&lt;/div&gt;
	&lt;div&gt;
		&lt;label for="data2"&gt;Formulaire - Zone texte - apparence par défaut&#160;:&lt;/label&gt;
		&lt;textarea name="data2" cols="15" rows="3" id="data2"&gt;&lt;/textarea&gt;
	&lt;/div&gt;
	&lt;div&gt;
		&lt;label for="data4"&gt;Formulaire - Sélection - apparence par défaut&#160;:&lt;/label&gt;
		&lt;select id="data4" name="data4"&gt;
			&lt;option value="Option 1"&gt;Option 1&lt;/option&gt;
			&lt;option value="Option 2"&gt;Option 2&lt;/option&gt;
			&lt;option value="Option 3"&gt;Option 3&lt;/option&gt;
			&lt;option value="Option 4"&gt;Option 4&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;fieldset&gt;
		&lt;legend&gt;Formulaire - &lt;code lang="en"&gt;legend&lt;/code&gt;, &lt;code lang="en"&gt;fieldset&lt;/code&gt; et case à cocher - apparence par défaut&lt;/legend&gt;
		&lt;div&gt;
			&lt;input name="checkbox" type="checkbox" id="data5" value="checkbox" /&gt;&#160;&lt;label for="data5"&gt;Option 1&lt;/label&gt;&#160;&#160;
			&lt;input name="checkbox" type="checkbox" id="data6" value="checkbox" /&gt;&#160;&lt;label for="data6"&gt;Option 2&lt;/label&gt;&#160;&#160;
			&lt;input name="checkbox" type="checkbox" id="data7" value="checkbox" /&gt;&#160;&lt;label for="data7"&gt;Option 3&lt;/label&gt;&#160;&#160;
			&lt;input name="checkbox" type="checkbox" id="data8" value="checkbox" /&gt;&#160;&lt;label for="data8"&gt;Option 4&lt;/label&gt;
		&lt;/div&gt;
	&lt;/fieldset&gt;
	&lt;div&gt;
		&lt;input name="submit" type="submit" id="submit" value="Soumettre - apparence par défaut" /&gt;
		&lt;input name="reset" type="reset" id="reset" value="Réinitialiser - apparence par défaut" /&gt;
	&lt;/div&gt;
&lt;/form&gt;</code></pre>
	</section>
	<section>
		<h3>CSS (utilise linenums)</h3>
		<pre class="prettyprint lang-css linenums"><code>#gcwu-date-mod dt,#gcwu-date-mod dd{
	float:left;
}

#gcwu-date-mod dd{
	margin:0 0 0 10px;
}

#gcwu-content h2,#gcwu-priorities h3{
	color:#333;
	font-weight:400;
}

#gcwu-content h2,#gcwu-priorities h3{
	border:none;
	margin-bottom:5px;
	font-size:1.6em;
}

div#gcwu-headlines ul li,div#gcwu-headlines ul{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}</code></pre>
	</section>
	<section>
		<h3>JavaScript (utilise linenums:50 et linenums)</h3>
		<pre class="prettyprint linenums:50 linenums"><code>/**
 * Initialize the plugin. This only runs once on the DOM.
 * @function init
 */
init = function() {
	var cssClass, cssClasses, i, len, $pre,
		$elm = $( this ),
		modeJS = wb.getMode() + ".js",
		deps = [ "site!deps/prettify" + modeJS ],
		settings = $.extend( {}, defaults, $elm.data() );

	wb.remove( selector );

	// Check the element for `lang-*` syntax CSS classes
	cssClasses = typeof $elm[0].className === "string" ? $elm[0].className.split( " " ) : [];
	for ( i = 0, len = cssClasses.length; i &lt; len; i++ ) {
		cssClass = cssClasses[ i ];
		if ( cssClass.indexOf( "lang-" ) === 0 ) {
			deps.push( "site!deps/" + cssClass + modeJS );
		}
	}

	// CSS class overrides of settings
	settings.allpre = settings.allpre || $elm.hasClass( "all-pre" );
	settings.linenums = settings.linenums || $elm.hasClass( "linenums" );

	// Apply global settings
	if ( settings.allpre || settings.linenums ) {
		$pre = $( "pre" );
		if ( settings.allpre ) {
			$pre.addClass( "prettyprint" );
		}
		if ( settings.linenums ) {
			$pre.filter( ".prettyprint" ).addClass( "linenums" );
		}
	}

	// Load the required dependencies and prettify the code once finished
	Modernizr.load({
		load: deps,
		complete: function() {
			wb.doc.trigger( "prettyprint.wb-prettify" );
		}
	});
}</code></pre>
	</section>
	<section>
	<h3>Comparaison avant/après</h3>
	<div class="row">
	<div class="col-md-6">
	<h4>Avant</h4>
<pre><code>&lt;section id="wb-srch" class="<del>col-lg-8 text-right</del>"&gt;
	&lt;h2&gt;Search&lt;/h2&gt;
	&lt;form action="#" method="post" name="cse-search-box" role="search"<del> class="form-inline"</del>&gt;
		&lt;div class="form-group"&gt;
			&lt;label for="wb-srch-q" class="wb-inv"&gt;Search Canada.ca&lt;/label&gt;
			&lt;input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca"&gt;
			&lt;datalist id="wb-srch-q-ac"&gt;&lt;/datalist&gt;
		&lt;/div&gt;
		&lt;div class="form-group submit"&gt;
			&lt;button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"&gt;
				&lt;span class="glyphicon-search glyphicon"&gt;&lt;/span&gt;
				&lt;span class="wb-inv"&gt;Search&lt;/span&gt;
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/form&gt;
&lt;/section&gt;</code></pre>
	</div>
	<div class="col-md-6">
	<h4>Après</h4>
<pre><code>&lt;section id="wb-srch" class="<ins>col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4</ins>"&gt;
	&lt;h2&gt;Search&lt;/h2&gt;
	&lt;form action="#" method="post" name="cse-search-box" role="search"&gt;
		&lt;div class="form-group<ins> wb-srch-qry</ins>"&gt;
			&lt;label for="wb-srch-q" class="wb-inv"&gt;Search Canada.ca&lt;/label&gt;
			&lt;input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca"&gt;
			&lt;datalist id="wb-srch-q-ac"&gt;&lt;/datalist&gt;
		&lt;/div&gt;
		&lt;div class="form-group submit"&gt;
			&lt;button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"&gt;
				&lt;span class="glyphicon-search glyphicon"&gt;&lt;/span&gt;
				&lt;span class="wb-inv"&gt;Search&lt;/span&gt;&lt;/button&gt;
		&lt;/div&gt;
	&lt;/form&gt;
&lt;/section&gt;</code></pre>
	</div>
	</div>
	</section>
</section>
